<template>
  <view class="NFT">
    <Navbar :title="navbarTitle"> </Navbar>
    <view class="type">
      <view
        class="left"
        @click="leftchange"
        :class="{ clicked: leftisClicked }"
      >
        {{ t('detail.all') }}
      </view>
      <view
        class="middle"
        @click="middlechange"
        :class="{ clicked: middleClicked }"
      >
        {{ t('detail.on') }}
      </view>
      <view
        class="right"
        @click="rightchange"
        :class="{ clicked: rightisClicked }"
      >
        {{ t('detail.end') }}
      </view>
    </view>
    <!-- 渲染 -->
    <scroll-view
      scroll-y
      class="list"
      v-if="list.length > 0"
      @scrolltolower="loadNextPage"
    >
      <view
        class="top"
        v-for="(item, index) in list"
        :key="index"
        @click="godetail(item.id)"
      >
        <view class="title">{{ t('detail.bit') }} {{ item.goods_name }}</view>
        <image class="img" :src="item.goods_pic" mode="scaleToFill" />
        <image
          class="img-a"
          v-if="item.status == 1"
          src="/static/NFT/Group 15.png"
          mode="scaleToFill"
        />
        <image
          class="img-a"
          v-if="item.status == 2"
          src="/static/NFT/Group16.png"
          mode="scaleToFill"
        />
        <image
          class="img-a"
          v-if="item.status == 3"
          src="/static/NFT/Group16.png"
          mode="scaleToFill"
        />
        <image
          class="img-a"
          v-if="item.status == 0"
          src="/static/NFT/Group17.png"
          mode="scaleToFill"
        />
        <view class="connent">
          <view class="left">
            <image class="img" src="/static/NFT/Frame.png" mode="scaleToFill" />
            <text>{{ item.click_total }}</text>
            <text>{{ t('detail.cli') }}</text>
          </view>
          <view class="middle">
            <image
              class="img"
              v-if="item.like_user_list.includes(useStore.user.id)"
              src="/static/NFT/like.png"
              mode="scaleToFill"
            />
            <image
              class="img"
              v-else
              src="/static/NFT/Frame(1).png"
              mode="scaleToFill"
            />
            <text>{{ item.like_total }}</text>
            <text>{{ t('detail.like') }}</text>
          </view>
          <view class="right">
            <image
              class="img"
              src="/static/NFT/Frame(2).png"
              mode="scaleToFill"
            />
            <text>{{ item.goods_price }}</text>
          </view>
        </view>
        <image class="line" src="/static/NFT/Line 12.png" mode="scaleToFill" />
        <view
          v-if="item.remain_time"
          style="
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #ffffff;
            justify-content: center;
            font-weight: 900;
          "
        >
          <uni-countdown
            @timeup="timeup"
            color="#fff"
            splitorColor="#fff"
            :show-day="false"
            :hour="Math.floor(item.remain_time / 3600)"
            :minute="Math.floor((item.remain_time % 3600) / 60)"
            :second="item.remain_time % 60"
          />
        </view>
      </view>
    </scroll-view>
    <nodata v-else></nodata>
  </view>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import api from '../../networks/apis';
import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
import nodata from '../../components/nodata.vue';

//改标题
import Navbar from '../../components/Navbar.vue';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '../../store/index';
const useStore = useUserStore();
//倒计时结束时触发
const timeup = () => {
  // console.log('----->sjdao');
  getNfclist();
};
const { t } = useI18n();
const navbarTitle = ref('');
navbarTitle.value = 'Metaverse';

// 切换标题
const leftisClicked = ref(true);
const middleClicked = ref(false);
const rightisClicked = ref(false);
const godetail = (id) => {
  uni.navigateTo({ url: `/pages/bitbeast/index?id=${id}` });
};
const leftchange = () => {
  leftisClicked.value = true;
  middleClicked.value = false;
  rightisClicked.value = false;
  is_end.value = 'all';
  list.value = [];
  page.value = 1;
  getNfclist();
};
const middlechange = () => {
  middleClicked.value = true;
  leftisClicked.value = false;
  rightisClicked.value = false;
  is_end.value = 'display';
  list.value = [];
  page.value = 1;

  getNfclist();
};
const rightchange = () => {
  rightisClicked.value = true;
  leftisClicked.value = false;
  middleClicked.value = false;
  is_end.value = 'end';
  list.value = [];
  page.value = 1;

  getNfclist();
};

onLoad(({ id }) => {
  console.log('----->id', id);
  category.value = id;
  getNfclist();
  secondsToHMS(list.value.remain_time); //倒计时
});

//获取列表
const list = ref([]);
const pagesize = ref(10);
const page = ref(1);
const category = ref();
const is_end = ref('all');
const getNfclist = async () => {
  const res = await api.getList({
    pagesize: pagesize.value,
    page: page.value,
    category: category.value,
    menu: is_end.value,
  });
  console.log(res, '商品列表');
  // list.value = res.data;
  //排序
  // const sortByStatus = (a, b) => {
  //   if (a.status < b.status) {
  //     return -1; // a排在b之前
  //   }
  //   if (a.status > b.status) {
  //     return 1; // a排在b之后
  //   }
  //   return 0; // 保持原本顺序
  // };

  // // 根据状态排序
  // list.value.sort(sortByStatus);
  if (res.data.length > 0) {
    list.value = [...list.value, ...res.data];
    page.value++;
  } else {
    // 如果返回数据为空，说明已经到达列表末尾
    console.log('已经到达列表末尾');
  }
  console.log(list.value, 11111);
};

//后续的触底加载页面事件、分页功能等
const loadNextPage = async () => {
  await getNfclist();
};

// 在组件销毁前取消事件监听
onBeforeUnmount(() => {
  // 取消事件监听
});

//倒计时
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
const secondsToHMS = (totalSeconds) => {
  hours.value = Math.floor(totalSeconds / 3600);
  minutes.value = Math.floor((totalSeconds % 3600) / 60);
  seconds.value = totalSeconds % 60;
};
</script>

<style lang="scss" scoped>
.list {
  background-color: #052b3d;
}

.NFT {
  width: 750rpx;
  /* height: 1624rpx; */
  height: 100vh;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .type {
    width: 688rpx;
    height: 134rpx;
    font-size: 24rpx;
    margin: 18rpx auto;
    font-family: Arial, Arial;
    line-height: 33rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image: url('/static/drawings/Rectangle 47.png');
    background-size: cover;
    background-repeat: no-repeat;

    .left {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .middle {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .right {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .clicked {
      padding-bottom: 20rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 33rpx;
      border-bottom: 2px solid white;
    }
  }

  .top {
    width: 690rpx;
    height: 606rpx;
    padding-top: 18rpx;
    background-image: url('/static/NFT/Rectangle 33.png');
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 26rpx;
    font-family: Arial, Arial;
    font-weight: 900;
    color: #ffffff;
    line-height: 30rpx;
    margin: 0 auto 30rpx;
    position: relative;

    .title {
      height: 36rpx;
      text-align: center;
    }

    .img {
      width: 634rpx;
      height: 340rpx;
      margin: 20rpx 30rpx;
    }

    .img-a {
      position: absolute;
      top: 0;
      left: 0;
      width: 238rpx;
      height: 238rpx;
      border-top-left-radius: 10px;
    }

    .connent {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 38rpx;

      .left {
        display: flex;
        align-items: center;

        .img {
          width: 40rpx;
          height: 40rpx;
          margin: 0;
          padding: 0;
        }

        text {
          height: 28rpx;
          font-size: 24rpx;
          font-family: Arial, Arial;
          font-weight: normal;
          color: rgba(255, 255, 255, 0.5);
          line-height: 28rpx;
          padding: 0 10rpx;
        }
      }

      .middle {
        display: flex;
        align-items: center;

        .img {
          width: 40rpx;
          height: 40rpx;
          margin: 0;
          padding: 0;
        }

        text {
          height: 28rpx;
          font-size: 24rpx;
          font-family: Arial, Arial;
          font-weight: normal;
          color: rgba(255, 255, 255, 0.5);
          line-height: 28rpx;
          padding: 0 10rpx;
        }
      }

      .right {
        display: flex;
        align-items: center;

        .img {
          width: 40rpx;
          height: 40rpx;
          margin: 0;
          padding: 0;
        }

        text {
          height: 28rpx;
          font-size: 24rpx;
          font-family: Arial, Arial;
          font-weight: normal;
          color: rgba(255, 255, 255, 0.5);
          line-height: 28rpx;
          padding: 0 10rpx;
        }
      }
    }

    .line {
      width: 636rpx;
      height: 2rpx;
      margin: 25rpx 26rpx 0;
      background-color: #fff;
    }

    .time {
      display: flex;
      align-items: center;
      justify-content: center;

      .img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 2rpx;
      }

      text {
        font-size: 26rpx;
        font-family: Arial, Arial;
        font-weight: 900;
        color: #ffffff;
        line-height: 30rpx;
        margin-right: 6rpx;
      }
    }
  }
}
</style>
